<template>
  <a-modal
    width="580px"
    style="height: 440px"
    :visible="props.showDialog1"
    title="查看账单"
    @ok="btnCancel1"
    @cancel="btnCancel1"
    bodystyle="padding:20px"
  >
    <a-form class="form" :label-col="{ span: 10 }" layout="horizontal">
      <a-form-item label="租户名称:">
        <span>{{ props.recordInfo.enterpriseName }}</span>
      </a-form-item>
      <a-form-item label="租赁楼宇:">
        <span>{{ props.recordInfo.buildingName }}</span>
      </a-form-item>
      <a-form-item label="缴费周期:">
        <span>{{ props.recordInfo.startTime }} </span>至<span>{{ props.recordInfo.endTime }}</span>
      </a-form-item>
      <a-form-item label="物业费(元/m²):">
        <span>{{ props.recordInfo.propertyFeePrice }}</span>
      </a-form-item>
      <a-form-item label="账单金额(元):">
        <span>{{ props.recordInfo.paymentAmount }}</span>
      </a-form-item>
      <a-form-item label="支付方式:">
        <span v-if="props.recordInfo.paymentMethod === 1">微信</span>
        <span v-else-if="props.recordInfo.paymentMethod === 2">支付宝</span>
        <span v-else>现金</span>
      </a-form-item>
      <a-form-item label="缴费时间:">
        <span>{{ props.recordInfo.createTime }}</span>
      </a-form-item>
    </a-form>
  </a-modal>

  <!-- 添加======================== -->
  <a-modal :visible="props.showDialog2" title="添加账单" @cancel="btnCancel2" @ok="addBillAPI">
    <a-form
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 16 }"
      ref="formRef"
      :model="formData"
      layout="vertical"
    >
      <a-form-item
        label="选择租户"
        name="enterpriseId"
        :rules="[{ required: true, message: '用户名不能为空', trigger: 'change' }]"
      >
        <a-select
          v-model:value="formData.enterpriseId"
          :showArrow="false"
          placeholder="请选择租户"
          :options="options1"
        ></a-select>
      </a-form-item>
      <a-form-item
        label="租赁楼宇"
        name="buildingId"
        :rules="[{ required: true, message: '用户名不能为空', trigger: 'change' }]"
      >
        <a-select
          v-model:value="formData.buildingId"
          :showArrow="false"
          placeholder="请选择租赁楼宇"
          :options="options2"
        ></a-select>
      </a-form-item>
      <a-form-item
        label="缴费周期"
        :rules="[{ required: true, message: '用户名不能为空', trigger: ['blur', 'change'] }]"
      >
        <a-range-picker v-model:value="timer1" style="width: 314px" />
      </a-form-item>
      <a-form-item
        label="支付金额"
        name="paymentAmount"
        :rules="[{ required: true, message: '用户名不能为空', trigger: 'blur' }]"
      >
        <a-input
          placeholder="请输入支付金额"
          v-model:value="formData.paymentAmount"
          disabled
        ></a-input>
      </a-form-item>
      <a-form-item
        label="支付方式"
        name="paymentMethod"
        :rules="[{ required: true, message: '用户名不能为空', trigger: 'change' }]"
      >
        <a-select
          v-model:value="formData.paymentMethod"
          style="width: 100%"
          placeholder="请选择支付方式"
        >
          <a-select-option value="1">微信</a-select-option>
          <a-select-option value="2">支付宝</a-select-option>
          <a-select-option value="3">现金</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { reactive, ref, watch, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { getEnterprise, getBuilding, getTotal, addBill } from '@/api/propertyfee.js'
import dayjs from 'dayjs'
// 宏命令
const props = defineProps({
  showDialog1: {
    type: Boolean,
    default: false
  },
  showDialog2: {
    type: Boolean,
    default: false
  },
  recordInfo: {
    type: Object
  }
})

const formData = reactive({
  // enterpriseName: '', //企业名称
  enterpriseId: null, //企业id
  buildingId: null, //楼宇id
  // buildingName: '', //楼宇名称
  // propertyFeePrice: null, //物业费价格
  // startTime: '', //缴费周期开始时间
  endTime: '', //缴费周期-结束时间
  paymentAmount: null, //支付金额
  paymentMethod: null, //支付方式1微信2支付宝3现金
  createTime: ''
})
const timer1 = ref([]) //时间
const options1 = ref([])
const options2 = ref([])
const formRef = ref(null) // 声名的变量
onMounted(async () => {
  // 表示 首次渲染已经完成
  await getBuildingAPI()
  await getEnterpriseAPI()
})
//两个下拉菜单
const getEnterpriseAPI = async () => {
  const res = await getEnterprise()
  const newArray = res.data.map((obj) => {
    return {
      value: obj.id,
      label: obj.name
    }
  })
  options1.value = newArray
}
//两个下拉菜单
const getBuildingAPI = async () => {
  const res = await getBuilding()
  console.log(res)
  const newArray = res.data.map((obj) => {
    return {
      value: obj.id,
      label: obj.name
    }
  })
  options2.value = newArray
}

//监听条件给出价格
watch([() => formData.enterpriseId, () => formData.buildingId, () => timer1.value], async () => {
  if (formData.buildingId && timer1.value?.length) {
    formData.startTime = dayjs(timer1.value[0]?.$d).format('YYYY-MM-DD')
    formData.endTime = dayjs(timer1.value[1]?.$d).format('YYYY-MM-DD')
    const obj = {
      buildingId: formData.buildingId,
      endTime: formData.endTime,
      startTime: formData.startTime
    }
    const res = await getTotal(obj)
    formData.paymentAmount = res.data
  }
})

const emit = defineEmits(['update:showDialog1', 'update:showDialog2', 'addSuccess'])
const btnCancel1 = () => {
  // 清空表单
  emit('update:showDialog1', false) // 通知父组件 将showDialog改成false
}
const btnCancel2 = () => {
  // 清空表单
  formRef.value?.resetFields()
  timer1.value = []
  emit('update:showDialog2', false) // 通知父组件 将showDialog改成false
}

const addBillAPI = async () => {
  formRef.value?.validate()
  const obj = { ...formData }
  await addBill(obj)
  message.success('添加成功')
  emit('addSuccess') // 通知父组件更新
  btnCancel2()
}
</script>

<style lang="less">
.form {
  div.ant-row.ant-form-item {
    margin-bottom: 0;
  }
}
</style>
